import { Card, Button, Divider, message, Spin } from 'antd';
import React, { PureComponent } from 'react';
import router from 'umi/router';
import { connect } from 'dva';
import { urlParse, matchDict } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';

const { Description } = DescriptionList;
@connect(({ suppliermaintenance, loading }) => ({
  loading: loading.models.suppliermaintenance,
  suppliermaintenance,
}))
class Details extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      dictList: [
        'TAXPAYER_TYPE',
        'MINI_INV_TYPE',
        'TAXPAYER_TYPE',
        'BANK_ID',
        'GENDER',
        'HAS_CHILD',
      ],
      supplyInfo: {
        suppInvoiceList: [],
        suppMailAddrList: [],
        suppBankAccountList: [],
        suppContactList: [],
        custCostCenterList: [],
        custAffixList: [],
        suppPrintInvoice: {},
      },
      invoiceTypeList: [],
      taxerType: [],
      bankId: [],
      gender: [],
      hasChild: [],
      activeKey: '1',
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { suppId, activeKey, dictList } = this.state;
    const suppId1 = urlParse(location.search).suppId ? urlParse(location.search).suppId : suppId;
    const activeKey1 = urlParse(location.search).activeKey
      ? urlParse(location.search).activeKey
      : activeKey;
    this.setState({ suppId: suppId1, activeKey: activeKey1 });
    // 获取页面所需字典
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: dictList,
    })
      .then(data => {
        this.setState({
          invoiceTypeList: data.MINI_INV_TYPE,
          taxerType: data.MINI_INV_TYPE,
          bankId: data.BANK_ID,
          gender: data.GENDER,
          hasChild: data.HAS_CHILD,
        });
      })
      .then(() => this.getList(suppId1));
  }

  // 获取数据
  getList = suppId => {
    const { dispatch } = this.props;
    const { invoiceTypeList, taxerType, bankId, gender, hasChild } = this.state;
    if (suppId) {
      dispatch({
        type: 'suppliermaintenance/getSuppInfo',
        payload: { suppId },
        callback: res => {
          this.setState({ suppId });
          if (res.success && res.data) {
            const supplyInfo = res.data;
            Object.keys(supplyInfo).forEach(key => {
              if (!supplyInfo[key] && !(supplyInfo[key] instanceof Array)) {
                supplyInfo[key] = '';
              } else if (key === 'suppPrintInvoice') {
                supplyInfo[key].serInvType = matchDict(invoiceTypeList, supplyInfo[key].serInvType);
              } else if (supplyInfo[key] instanceof Array && supplyInfo[key].length) {
                supplyInfo[key].forEach(item => {
                  const temp = item;
                  if (temp.taxerType) {
                    temp.taxerType = matchDict(taxerType, temp.taxerType);
                  }
                  if (temp.bankId) {
                    temp.bankId = matchDict(bankId, temp.bankId);
                  }
                  if (temp.gender) {
                    temp.gender = matchDict(gender, temp.gender);
                  }
                  if (temp.hasChild) {
                    temp.hasChild = matchDict(hasChild, temp.hasChild);
                  }
                });
              }
            });
            this.setState({ supplyInfo, loading: false });
          } else {
            message.warning(`${res.message || '暂无数据！'}`);
          }
        },
      });
    } else {
      router.push('/supplymanage/protection/index');
    }
  };

  // 获取字典:
  // 发票类型MINI_INV_TYPE，发票类型TAXPAYER_TYPE、所属银行BANK_ID、性别GENDER、是否有小孩HAS_CHILD、
  getDictList = callback => {
    const { dispatch } = this.props;
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['MINI_INV_TYPE', 'TAXPAYER_TYPE', 'BANK_ID', 'GENDER', 'HAS_CHILD'],
    }).then(res => {
      if (res.success && res.data) {
        this.setState({
          invoiceTypeList: res.data.MINI_INV_TYPE,
          taxerType: res.data.TAXPAYER_TYPE,
          bankId: res.data.BANK_ID,
          gender: res.data.GENDER,
          hasChild: res.data.HAS_CHILD,
        });
        callback();
      } else {
        message.warning(`${res.message || '暂无数据！'}`);
      }
    });
  };

  render() {
    const { loading, supplyInfo, activeKey } = this.state;
    return supplyInfo.name ? (
      <PageHeaderWrapper>
        <Card
          title={<span style={{ fontWeight: 'bolder' }}>供应商信息</span>}
          style={{ marginBottom: 24 }}
          bordered={false}
        >
          {/* 基本信息 */}
          <div>
            <DescriptionList
              title={
                <span style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  基本信息
                </span>
              }
            >
              <Description term="供应商名称">{supplyInfo.name || '--'}</Description>
              {supplyInfo.type ? (
                <Description term="供应商类型">{supplyInfo.typeName || '--'}</Description>
              ) : (
                <div />
              )}
              <Description term="地区">
                {`${supplyInfo.areaParentName}/${supplyInfo.areaName}` || '--'}
              </Description>
              <Description term="统一社会信用代码">{supplyInfo.uniCreditCode || '--'}</Description>
              <Description term="办公地址">{supplyInfo.officeAddr || '--'}</Description>
              <Description term="工作邮箱">{supplyInfo.email || '--'}</Description>
              <Description term="联系电话">{supplyInfo.tel || '--'}</Description>
              <Description term="备注">{supplyInfo.remark || '--'}</Description>
            </DescriptionList>
          </div>
          {/* 增值税发票信息 */}
          {supplyInfo.suppInvoiceList && supplyInfo.suppInvoiceList.length ? (
            <div>
              <Divider />
              {supplyInfo.suppInvoiceList.map((item, index) => (
                <div key={item.invId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          发票信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="增值税单位名称">{item.vatCoprName || '--'}</Description>
                    <Description term="发票类型">{item.invTypeName || '--'}</Description>
                    <Description term="纳税人识别号">{item.taxerIdNo || '--'}</Description>
                    <Description term="开户行">{item.openBank || '--'}</Description>
                    <Description term="银行账号">{item.bankAcco || '--'}</Description>
                    <Description term="开票电话">{item.invPhone || '--'}</Description>
                    <Description term="开票地址">{item.invArea || '--'}</Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
          {/* 邮寄地址信息 */}
          {supplyInfo.suppMailAddrList && supplyInfo.suppMailAddrList.length ? (
            <div>
              <Divider />
              {supplyInfo.suppMailAddrList.map((item, index) => (
                <div key={item.mailAddrId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          邮寄地址信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="联系人姓名">{item.contPerName || '--'}</Description>
                    <Description term="联系人电话">{item.contPerPhone || '--'}</Description>
                    <Description term="邮寄地址">
                      {item.mailArea} {item.mailAddr}
                    </Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
          {/* 银行账户信息 */}
          {supplyInfo.suppBankAccountList && supplyInfo.suppBankAccountList.length ? (
            <div>
              <Divider />
              {supplyInfo.suppBankAccountList.map((item, index) => (
                <div key={item.bankAccoId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          银行账户信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="城市">{item.areaName || '--'}</Description>
                    <Description term="银行">{item.bankId || '--'}</Description>
                    <Description term="开户行">{item.openBank || '--'}</Description>
                    <Description term="银行账号">{item.bankAcco || '--'}</Description>
                    <Description term="开户单位名称">{item.accoHolderName || '--'}</Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
          {/* 联系人信息 */}
          {supplyInfo.suppContactList && supplyInfo.suppContactList.length ? (
            <div>
              <Divider />
              {supplyInfo.suppContactList.map((item, index) => (
                <div key={item.contPerId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          联系人信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="姓名">{item.name || '--'}</Description>
                    <Description term="职位">{item.position || '--'}</Description>
                    <Description term="邮箱">{item.email || '--'}</Description>
                    <Description term="手机号码">{item.phoneNo || '--'}</Description>
                    <Description term="固定电话">{item.tel || '--'}</Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button
            onClick={() => router.push(`/supplymanage/protection/index?activeKey=${activeKey}`)}
          >
            返回
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    ) : (
      <div style={{ position: 'relative', top: '50%', textAlign: 'center' }}>
        <Spin tip="Loading..." spinning={loading} />
      </div>
    );
  }
}

export default Details;
